interface IObserverOptions {
  /** 监听的目标元素选择器 */
  target: string | HTMLElement | Document;
  /** 父级元素选择器，如果不传则默认使用document */
  /** 是否监听子树变化 */
  subtree?: boolean;
  /** 是否监听节点属性变化 */
  attributes?: boolean;
  /** 是否监听节点内容变化 */
  characterData?: boolean;
  /** 是否监听子节点增删 */
  childList?: boolean;
  /** 监听回调函数 */
  callback: MutationCallback;
}

/**
 * 创建DOM变化监听器
 * @param options 监听配置项
 * @returns {MutationObserver} 返回监听器实例，可用于后续停止监听
 */

export const createDOMObserver = (
  options: IObserverOptions
): MutationObserver | null => {
  try {
    let {
      target,
      subtree = true,
      attributes = false,
      characterData = false,
      childList = true,
      callback,
    } = options;

    // 获取目标元素
    if (typeof target === "string") {
      target = document.querySelector(target) as HTMLElement;
    }
    if (!target) {
      console.error("找不到目标元素:", target);
      return null;
    }
    // 创建观察者实例
    const observer = new MutationObserver(callback);
    // 配置观察选项
    const config = {
      subtree,
      attributes,
      characterData,
      childList,
    };

    // 开始观察
    observer.observe(target, config);
    return observer;
  } catch (error) {
    console.error("创建DOM监听器失败:", error);
    return null;
  }
};
